<template>
  <div>
    <el-form
      ref="ruleForm"
      size="small"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      label-position="left"
      :disabled="disabled"
    >
      <el-card class="box">
        <div class="box">
          <el-form-item
            label="选择项目"
            prop="projectCode"
          >
            <el-input
              readonly
              v-model="projectInfo.projectCode"
              placeholder="请选择项目"
              @click.native="handleProject"
              suffix-icon="el-icon-edit"
              style="width: 200px;"
            ></el-input>
          </el-form-item>
        </div>
        <el-descriptions
          :column="3"
          border
          v-if="projectInfo.id"
        >
          <el-descriptions-item label="项目编号">{{ projectInfo.projectCode }}
            <el-button
              size="mini"
              type="text"
              :disabled="false"
              style="margin-left: 10px;"
              @click="handleProjectInfo(projectInfo)"
            >查看项目信息</el-button>
          </el-descriptions-item>
          <el-descriptions-item label="客户名称">{{ projectInfo.customerNickName }}</el-descriptions-item>
          <el-descriptions-item label="代理商名称">{{ projectInfo.projectBasicVo.submitAgentNickName }}</el-descriptions-item>
          <el-descriptions-item label="立项通过时间">{{ projectInfo.createTime }}</el-descriptions-item>
          <el-descriptions-item label="融资金额">{{ formatReceiveAmount(projectInfo.rentTotalVo.leasePrincipal) }}</el-descriptions-item>
          <el-descriptions-item label="设备厂商">{{ projectInfo.projectBasicVo.relatedFactoryName }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card class="box">
        <div class="title">
          设备列表
        </div>
        <el-table
          :data="ruleForm.equipmentList"
          style="width: 100%; margin-bottom: 20px"
          border
        >
          <el-table-column
            label="序号"
            width="80"
          >
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column
            label="产品名称"
            prop="equipmentName"
          ></el-table-column>
          <el-table-column
            label="规格型号"
            prop="specificationNo"
          ></el-table-column>
          <el-table-column
            label="设备机号"
            prop="equipmentNo"
          >
            <template slot="header">
              <div class="table-label">
                设备机号
              </div>
            </template>
            <template slot-scope="scope">
              <el-form-item
                :prop="'equipmentList.' + scope.$index + '.equipmentNo'"
                :rules="{ required: true, message: '请输入设备机号', trigger: 'blur' }"
              >
                <el-input
                  v-model="scope.row.equipmentNo"
                  placeholder="请输入设备机号"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            label="发票"
            prop="fileUuid"
          >
            <template slot="header">
              <div class="table-label">
                发票
              </div>
            </template>
            <template slot-scope="scope">
              <el-form-item
                :prop="'equipmentList.' + scope.$index + '.fileUuid'"
                :rules="{ required: true, message: '请上传发票', trigger: 'change' }"
              >
                <el-upload
                  class="upload-demo"
                  :ref="'uploadDeviceFile' + scope.$index"
                  :accept="fileAccept"
                  :action="uploadFileUrl + '/file/saveFile'"
                  :before-upload="beforeUpload"
                  :on-change="(file, fileList) => handleChange(file, fileList, scope.row)"
                  :on-success="(response, file, fileList) => handleSuccess(response, file, fileList, scope.row, scope.$index, 'uploadDeviceFile' + scope.$index)"
                  :on-remove="(file, fileList) => handleRemove(file, fileList, scope.row)"
                  :file-list="scope.row.fileList"
                  :data="{fileRemark: '', fileuserInfo: ''}"
                  :multiple="false"
                  :auto-upload="true"
                  style="width: 90%;"
                >
                  <el-button
                    type="text"
                    style="font-size: 16px;"
                    icon="el-icon-upload2"
                  ></el-button>
                </el-upload>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="150px"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                :disabled="!disabled"
                v-if="disabled"
                @click="handleDownloadFile(scope.row)"
              >下载</el-button>
              <el-button
                size="mini"
                type="text"
                :disabled="!disabled"
                v-if="disabled"
                @click="handlePreviewFile(scope.row)"
              >预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <el-card class="box">
        <div class="title">
          验收确认书
        </div>
        <el-table
          :data="ruleForm.confirmList"
          style="width: 100%; margin-bottom: 20px"
          border
        >
          <el-table-column
            label="序号"
            width="80"
          >
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column
            label="附件名称"
            prop="fileName"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fileName"
                placeholder="请输入附件名称"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="附件说明"
            prop="fileRemark"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fileRemark"
                placeholder="请输入附件说明"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="附件上传"
            prop="fileDesc"
          >
            <template slot-scope="scope">
              <el-upload
                class="upload-demo"
                :ref="'uploadCheckFile' + scope.$index"
                :accept="fileAccept"
                :action="uploadFileUrl + '/file/saveFile'"
                :before-upload="beforeUpload"
                :on-change="(file, fileList) => handleChange(file, fileList, scope.row)"
                :on-success="(response, file, fileList) => handleSuccess(response, file, fileList, scope.row, scope.$index, 'uploadCheckFile' + scope.$index)"
                :on-remove="(file, fileList) => handleRemove(file, fileList, scope.row)"
                :file-list="scope.row.fileList"
                :data="{fileRemark: scope.row.fileRemark, fileuserInfo: scope.row.fileName}"
                :multiple="false"
                :auto-upload="true"
              >
                <el-button
                  type="text"
                  style="font-size: 16px;"
                  icon="el-icon-upload2"
                ></el-button>
              </el-upload>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="150px"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              操作
              <el-button
                size="mini"
                type="primary"
                v-if="!disabled"
                style="margin-left: 10px;"
                @click="addFileList('confirmList')"
              >+新增</el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                v-if="!disabled"
                style="color: red;"
                @click="deleteFileList(scope.$index, 'confirmList')"
              >删除</el-button>
              <el-button
                size="mini"
                type="text"
                :disabled="!disabled"
                v-if="disabled"
                @click="handleDownloadFile(scope.row)"
              >下载</el-button>
              <el-button
                size="mini"
                type="text"
                :disabled="!disabled"
                v-if="disabled"
                @click="handlePreviewFile(scope.row)"
              >预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <el-card class="box">
        <div class="title">
          保单信息
        </div>
        <el-table
          :data="ruleForm.policyList"
          style="width: 100%; margin-bottom: 20px"
          border
        >
          <el-table-column
            label="序号"
            width="80"
          >
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column
            label="附件名称"
            prop="fileName"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fileName"
                placeholder="请输入附件名称"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="附件说明"
            prop="fileRemark"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fileRemark"
                placeholder="请输入附件说明"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="附件上传"
            prop="fileDesc"
          >
            <template slot-scope="scope">
              <el-upload
                class="upload-demo"
                :ref="'uploadGuaranteeFile' + scope.$index"
                :accept="fileAccept"
                :action="uploadFileUrl + '/file/saveFile'"
                :before-upload="beforeUpload"
                :on-change="(file, fileList) => handleChange(file, fileList, scope.row)"
                :on-success="(response, file, fileList) => handleSuccess(response, file, fileList, scope.row, scope.$index, 'uploadGuaranteeFile' + scope.$index)"
                :on-remove="(file, fileList) => handleRemove(file, fileList, scope.row)"
                :file-list="scope.row.fileList"
                :data="{fileRemark: scope.row.fileRemark, fileuserInfo: scope.row.fileName}"
                :multiple="false"
                :auto-upload="true"
              >
                <el-button
                  type="text"
                  style="font-size: 16px;"
                  icon="el-icon-upload2"
                ></el-button>
              </el-upload>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="150px"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              操作
              <el-button
                size="mini"
                type="primary"
                v-if="!disabled"
                style="margin-left: 10px;"
                @click="addFileList('policyList')"
              >+新增</el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                v-if="!disabled"
                style="color: red;"
                @click="deleteFileList(scope.$index, 'policyList')"
              >删除</el-button>
              <el-button
                size="mini"
                type="text"
                :disabled="!disabled"
                v-if="disabled"
                @click="handleDownloadFile(scope.row)"
              >下载</el-button>
              <el-button
                size="mini"
                type="text"
                :disabled="!disabled"
                v-if="disabled"
                @click="handlePreviewFile(scope.row)"
              >预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <el-card class="box">
        <div class="title">
          签署合同
        </div>
        <el-table
          :data="ruleForm.contractList"
          style="width: 100%; margin-bottom: 20px"
          border
        >
          <el-table-column
            label="序号"
            width="80"
          >
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column
            label="合同编号"
            prop="contractId"
          ></el-table-column>
          <el-table-column
            label="客户名称"
            prop="customerName"
          ></el-table-column>
          <el-table-column
            label="代理商"
            prop="agentName"
          ></el-table-column>
          <el-table-column
            label="合同金额"
            prop="contractSum"
          >
            <template slot-scope="scope">
              {{ formatReceiveAmount(scope.row.contractSum) }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="150px"
          ></el-table-column>
        </el-table>
      </el-card>

      <el-card class="box">
        <div class="title">
          起租应收款
        </div>
        <el-descriptions :column="3" border v-if="JSON.stringify(receivableInfo) != '{}'">
          <el-descriptions-item label="应收首付款">{{ formatReceiveAmount(receivableInfo.downPayment) }} (人民币{{ numToChinaReceiveNumerals(receivableInfo.downPayment) }})</el-descriptions-item>
          <el-descriptions-item label="当前状态">{{ receivableInfo.status === '1' ? '已收' : '未收' }}</el-descriptions-item>
          <el-descriptions-item label="收款时间">{{ receivableInfo.chargeTime || '-' }}</el-descriptions-item>

          <el-descriptions-item label="应收保证金">{{ formatReceiveAmount(receivableInfo.deposit) }} (人民币{{ numToChinaReceiveNumerals(receivableInfo.deposit) }})</el-descriptions-item>
          <el-descriptions-item label="当前状态">{{ receivableInfo.status === '1' ? '已收' : '未收' }}</el-descriptions-item>
          <el-descriptions-item label="收款时间">{{ receivableInfo.chargeTime || '-' }}</el-descriptions-item>

          <el-descriptions-item label="应收手续费">{{ formatReceiveAmount(receivableInfo.premium) }} (人民币{{ numToChinaReceiveNumerals(receivableInfo.premium) }})</el-descriptions-item>
          <el-descriptions-item label="当前状态">{{ receivableInfo.status === '1' ? '已收' : '未收' }}</el-descriptions-item>
          <el-descriptions-item label="收款时间">{{ receivableInfo.chargeTime || '-' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card class="box">
        <div class="title">
          其他材料
        </div>
        <el-table
          :data="ruleForm.otherList"
          style="width: 100%; margin-bottom: 20px"
          border
        >
          <el-table-column
            label="序号"
            width="80"
          >
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column
            label="附件名称"
            prop="fileName"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fileName"
                placeholder="请输入附件名称"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="附件说明"
            prop="fileRemark"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fileRemark"
                placeholder="请输入附件说明"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="附件上传"
            prop="fileDesc"
          >
            <template slot-scope="scope">
              <el-upload
                class="upload-demo"
                :ref="'uploadGuaranteeFile' + scope.$index"
                :accept="fileAccept"
                :action="uploadFileUrl + '/file/saveFile'"
                :before-upload="beforeUpload"
                :on-change="(file, fileList) => handleChange(file, fileList, scope.row)"
                :on-success="(response, file, fileList) => handleSuccess(response, file, fileList, scope.row, scope.$index, 'uploadGuaranteeFile' + scope.$index)"
                :on-remove="(file, fileList) => handleRemove(file, fileList, scope.row)"
                :file-list="scope.row.fileList"
                :data="{fileRemark: scope.row.fileRemark, fileuserInfo: scope.row.fileName}"
                :multiple="false"
                :auto-upload="true"
              >
                <el-button
                  type="text"
                  style="font-size: 16px;"
                  icon="el-icon-upload2"
                ></el-button>
              </el-upload>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="150px"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              操作
              <el-button
                size="mini"
                type="primary"
                v-if="!disabled"
                style="margin-left: 10px;"
                @click="addFileList('otherList')"
              >+新增</el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                v-if="!disabled"
                style="color: red;"
                @click="deleteFileList(scope.$index, 'otherList')"
              >删除</el-button>
              <el-button
                size="mini"
                type="text"
                :disabled="!disabled"
                v-if="disabled"
                @click="handleDownloadFile(scope.row)"
              >下载</el-button>
              <el-button
                size="mini"
                type="text"
                :disabled="!disabled"
                v-if="disabled"
                @click="handlePreviewFile(scope.row)"
              >预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <el-card v-if="!disabled">
        <div>
          <el-form-item
            label="备注"
            label-width="120px"
          >
            <el-input
              v-model="ruleForm.lendersRemark"
              placeholder="请输入备注"
              clearable
              type="textarea"
              :rows="2"
              :style="{width: '100%'}"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="下一节点审批人"
            prop="targetUserName"
            label-width="120px"
          >
            <el-radio-group v-model="ruleForm.targetUserName">
              <el-radio
                :label="item.userName"
                v-for="item in approveList"
                :key="item.userName"
              >{{ item.nickName }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div>
          <el-button
            type="info"
            size="mini"
            @click="handleSubmit('0')"
          >保存草稿</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="handleSubmit('1')"
          >确认提交</el-button>
        </div>
      </el-card>
    </el-form>

    <ProjectTable
      ref="projectRef"
      :checkShow="true"
      @ok="handleProjectOk"
    ></ProjectTable>

    <PreviewFile
      :fileType="fileType"
      :fileUrl="fileUrl"
      :dialogVisible="dialogFileVisible"
      @cancel="dialogFileVisible = false"
    />

    <FormApprovalDialog ref="formApprovalDialogRef"></FormApprovalDialog>
  </div>
</template>

<script>
import { alllist, getNodeUsers, projectApplyInfo, projectApplyList, getinfoByProjectId, rentReceivableList } from '@/api/processManage/approveForms'
import { downloadFile, previewFile, formatMoney, numToChinaNumerals } from '@/utils/utils';

import ProjectTable from './ProjectTable.vue';
import PreviewFile from '@/components/PreviewFile/index'
import FormApprovalDialog from './FormApprovalDialog'

export default {
  dicts: ['enabled_file_upload_types'],
  props: ['templateId', 'doc', 'flowNo', 'disabled', 'templateName'],
  components: { ProjectTable, PreviewFile, FormApprovalDialog },
  data() {
    return {
      uploadFileUrl: process.env.VUE_APP_BASE_API,
      ruleForm: {
        projectCode: null,
        projectId: null,

        equipmentIds: '',
        confirmIds: '',
        policyIds: '',
        lendersFilesIds: '',

        lendersRemark: '',
        equipmentList: [],
        confirmList: [],
        policyList: [],
        otherList: [],
        contractList: [],
        targetUserName: '',
      },
      rules: {
        projectCode: [{ required: true, message: '请选择项目', trigger: 'change' }],
        targetUserName: [{ required: true, message: '请选择下一节点审批人', trigger: 'blur' }],
      },

      approveList: [],
      fileAccept: '',
      projectInfo: {
        customerAdmitVo: {},
        projectBasicVo: {
          id: '',
        },
        rentCalculateVo: {}
      },
      fileUrl: '',
      fileType: '',
      dialogFileVisible: false,
      receivableInfo: {}
    }
  },
  created() {
    this.$nextTick(() => {
      this.$refs['ruleForm'].resetFields();
    })
    this.handleGetNodeUsers()
  },
  watch: {
    'dict.type.enabled_file_upload_types': {
      deep: true,
      handler(newValue) {
        if (newValue && newValue.length > 0) {
          this.fileAccept = newValue.map(item => {
            let updatedValue = item.value.split(',').map(item => `.${item}`).join(',');
            return updatedValue;
          }).join(',');
        }
      },
      immediate: true,
    },
    doc: {
      deep: true,
      async handler(val) {
        console.log(val);
        if (JSON.stringify(val) != '{}') {
          this.ruleForm = JSON.parse(JSON.stringify(val))

          const res = await projectApplyList({
            projectCode: this.ruleForm.projectCode
          });
          const fileItem = res.rows[0]
          this.ruleForm.projectId = fileItem.id
          const ret = await projectApplyInfo({
            id: this.ruleForm.projectId,
          });
          this.projectInfo = {
            ...fileItem,
            ...ret.data
          }
          this.handleAlllist()
          this.handleRentReceivableList()
        }
      },
      immediate: true,
    },
  },
  methods: {
    numToChinaReceiveNumerals(num) {
      return numToChinaNumerals(String(num));
    },
    formatReceiveAmount(amount) {
      return formatMoney(amount);
    },
    handleProjectInfo(row) {
      this.$refs.formApprovalDialogRef.open(row)
    },
    handleProject() {
      this.$refs.projectRef.sync()
    },
    handleProjectOk(row) {
      this.projectInfo = row
      this.ruleForm.projectId = row.id
      this.ruleForm.projectCode = row.projectCode
      this.$refs.ruleForm.clearValidate(['projectId']);
      this.handleAlllist()
      this.handleGetinfoByProjectId()
      this.handleRentReceivableList()
    },
    handleGetinfoByProjectId() {
      getinfoByProjectId({
        projectId: this.ruleForm.projectId
      }).then(res => {
        this.ruleForm.equipmentList = res.data.map(item => {
          return {
            equipmentId: item.equipmentId,
            equipmentName: item.equipmentName,
            specificationNo: item.specificationNo,
            equipmentNo: '',
            fileUuid: '',
            fileList: []
          }
        })
      })
    },
    handleAlllist() {
      alllist({
        projectId: this.ruleForm.projectId
      }).then(res => {
        this.ruleForm.contractList = res.data
      })
    },
    // 获取起租应收列表
    handleRentReceivableList() {
      rentReceivableList({
        projectId: this.ruleForm.projectId
      }).then(res => {
        this.receivableInfo = res.rows[0]
      })
    },
    beforeUpload(file) {
      if (file.size / 1024 / 1024 > 50) {
        this.$message.error('文件不能超过50M！');
        return false;
      }
      return true;
    },

    addFileList(type) {
      this.ruleForm[type].push({
        fileName: '',
        fileUuid: '',
        fileList: [],
        fileRemark: ''
      })
    },
    deleteFileList(i, type) {
      this.ruleForm[type].splice(i, 1);
    },
    handleChange(file, fileList, v) {
      if (fileList.length > 0) {
        v.fileList = [fileList[fileList.length - 1]];
      } else {
        v.fileList = [];
      }
      return true
    },
    handleSuccess(response, file, fileList, v, i, uploadName) {
      let uid = file.uid
      let idx = this.$refs[uploadName].uploadFiles.findIndex(item => item.uid == uid)
      if (response.code != 200) {
        this.$modal.msgError('文件格式或命名存在特殊字符,请检查后重新上传!');
        this.$refs[uploadName].uploadFiles.splice(idx, 1)
        return true;
      }

      const { fileName: originalFileName, fileUuid } = response.data;

      v.fileName = originalFileName.split('.').shift();
      v.fileUuid = fileUuid;
      v.fileList.push(file);
    },
    handleRemove(file, fileList, v) {
      v.fileList = fileList
      if (!v.fileList.length) {
        v.fileUuid = ''
        v.fileName = ''
      }
    },
    handleGetNodeUsers() {
      getNodeUsers({
        templateId: this.templateId,
        flowNo: '',
        targetAction: 'TO_NEXT',
        targetNodeId: ''
      }).then(res => {
        this.approveList = res.data
        this.ruleForm.targetUserName = res.data.length ? res.data[0].userName : ''
      })
    },
    // 文件下载
    async handleDownloadFile(row) {
      downloadFile({ fileUuid: row.fileUuid });
    },
    // 文件预览
    async handlePreviewFile(row) {
      try {
        const { arrayBuffer, fileType } = await previewFile({ fileUuid: row.fileUuid });
        this.fileUrl = arrayBuffer;
        this.fileType = fileType;
        this.dialogFileVisible = true
      } catch (error) {
        this.$modal.msgError(error.message);
      }
    },

    handleSubmit(flag) {
      this.ruleForm.flag = flag
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if(this.receivableInfo.status === '0') {
            return this.$message.success("起租应收款状态未完成")
          }
          let equipmentList = this.ruleForm.equipmentList.filter(item => item.fileUuid)
          let confirmList = this.ruleForm.confirmList.filter(item => item.fileUuid)
          let policyList = this.ruleForm.policyList.filter(item => item.fileUuid)
          let otherList = this.ruleForm.otherList.filter(item => item.fileUuid)

          let params = {
            ...this.ruleForm,
            equipmentList: equipmentList.map(item => {
              return {
                ...item,
                invoiceId: item.fileUuid
              }
            }),
            confirmList,
            policyList,
            otherList,
            equipmentIds: '',
            confirmIds: confirmList.map(item => item.fileUuid).join(','),
            policyIds: confirmList.map(item => item.fileUuid).join(','),
            lendersFilesIds: confirmList.map(item => item.fileUuid).join(','),
            flag,
            flowNo: this.flowNo || ''
          }

          this.$emit('submit', params);
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  margin-bottom: 20px;
  .title {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
  }
  .box-card {
    margin-bottom: 20px;
  }

  .upload-demo {
    display: flex;
    align-items: center;
    :deep(.el-upload-list) {
      width: 90%;
      .el-upload-list__item {
        margin-top: 0 !important;
      }
    }
  }

  ::v-deep .el-table .el-form-item__content {
    margin-left: 0px !important;
  }
  ::v-deep .el-table .el-form-item {
    margin-bottom: 0px;
  }
  .table-label:before {
    content: "*";
    color: #ff4949;
    margin-right: 4px;
  }

  :deep(.el-descriptions-item__label) {
    width: 120px;
  }
}
</style>
